<!--
 * @Author: boyyang
 * @Date: 2022-02-03 13:40:01
 * @LastEditTime: 2022-02-05 12:45:32
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\chatRoom\components\chatRoomLeft.vue
-->

<template>
    <div class="chat-room-left">
        <div class="right-menu">
            <div class="top-header">
                <img :src="props.avatarUrl" />
            </div>

            <div class="icon-groups">
                <i
                    :class="['iconfont icon-liaotian', { 'active': activeIndex == 0 }]"
                    @click="changeType(0)"
                ></i>
                <i
                    :class="['iconfont icon-bg-chat', { 'active': activeIndex == 1 }]"
                    @click="changeType(1)"
                ></i>
                <i
                    :class="['iconfont icon-xiaoxi', { 'active': activeIndex == 2 }]"
                    @click="changeType(2)"
                ></i>
            </div>

            <div class="exit">
                <i class="iconfont icon-tuichu2" @click="exit"></i>
            </div>
        </div>
        <div class="list-wrapper">
            <div class="add-new-group">
                <i class="iconfont icon-jia"></i>
            </div>
            <div
                v-for="(item, i) in props.groupLists"
                :key="i"
                class="list-item menu-active"
                @click="itemClick(item.groupID)"
            >{{ item.name }}</div>
        </div>
    </div>
</template>

<script lang="ts" setup>

interface IChatRoomLeftProps {
    groupLists?: any[];
    avatarUrl?: string;
}

interface IChatRoomLeftEmits {
    (e: 'itemClick', id: string): void;
    (e: 'exit'): void;
    (e: 'changeType', index: number): void;
}

const props = withDefaults(defineProps<IChatRoomLeftProps>(), {})
const emits = defineEmits<IChatRoomLeftEmits>()

const activeIndex = ref<number>(0)

const itemClick = (id: string) => {
    emits('itemClick', id)
}

const changeType = (index: number) => {
    activeIndex.value = index
    emits('changeType', index)
}

const exit = () => {
    emits('exit')
}
</script>

<style scoped lang="scss">
.chat-room-left {
    box-sizing: border-box;
    width: 100%;
    height: 100%;

    background-color: #3d3b4f;

    display: flex;

    .right-menu {
        box-sizing: border-box;
        width: 75px;
        height: 100%;
        background-color: #392f41;
        display: flex;
        // justify-content: center;
        align-items: center;
        flex-direction: column;

        padding: 10px 0;

        position: relative;

        .top-header {
            box-sizing: border-box;
            width: 65px;
            height: 65px;

            border-radius: 100%;

            background-color: white;

            overflow: hidden;

            img {
                box-sizing: border-box;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .icon-groups {
            box-sizing: border-box;
            width: 100%;
            padding: 20px 0;
            margin-top: 100px;

            display: grid;
            grid-template-rows: repeat(3, 1fr);
            justify-items: center;
            grid-row-gap: 50px;
            
            i {
                font-size: 25px;
                color: whitesmoke;
                cursor: pointer;

                &:hover {
                    color: #c93756;
                }
            }

            .active {
                color: #c93756;
            }
        }

        .exit {
            position: absolute;
            bottom: 15px;
            width: 100%;

            display: flex;
            justify-content: center;
            align-items: center;

            i {
                font-size: 30px;
                color: whitesmoke;
                cursor: pointer;

                &:hover {
                    color: #c93756;
                }
            }
        }
    }

    .list-wrapper {
        width: calc(100% - 75px);
        padding: 50px 0;
        position: relative;
        .list-item {
            box-sizing: border-box;
            width: 100%;
            height: 50px;

            padding: 0 15px;
            display: flex;
            align-items: center;

            // background-color: #ff4777;

            color: whitesmoke;
        }

        .menu-active {
            background-color: rgba(128, 128, 128, 0.1);
        }

        .add-new-group {
            position: absolute;

            top: 10px;
            right: 25px;

            i {
                font-size: 16px;
                color: whitesmoke;
                cursor: pointer;

                &:hover {
                    color: #c93756;
                }
            }
        }
    }
}

@media screen and (max-width: 1000px) {
    .chat-room-left {
        display: flex;
        flex-direction: column;
        align-items: start;
        height: auto;

        .right-menu {
            box-sizing: border-box;
            width: 100%;
            height: auto;
            display: flex;
            align-items: center;
            flex-direction: row;
            padding: 0px 20px;

            .icon-groups {
                // width: 20%;
                width: calc(100% - 120px);
                display: flex;
                justify-content: space-between;
                margin-top: 0;

                padding: 0 20px;
            }

            .exit {
                position: absolute;
                width: auto;
                right: 25px;
            }
        }

        .list-wrapper {
            width: 100%;
            padding: 0;
        }
    }
}
</style>